<template>
  <div class="sj-form">
    <stepBar length=60></stepBar>
    <div class="form-main">
      <ul class="select-last ">
        <li class="input-box flex-box">
          <div><p>样本类型</p>
            <div class="select-btn">
              <p @click="showPicker0">{{formbData.yangbenLX.value}}<span v-if="formbData.yangbenLX.value ==='请选择'"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
            </div>
          </div>
        </li>
        <li class="input-box flex-box">
          <div><p>采样日期</p>
            <div class="select-btn">
              <p @click="showPicker3">{{formbData.caiyangRQ.value}}<span v-if="formbData.caiyangRQ.value ==='请选择'"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
            </div>
          </div>
        </li>
        <li class="input-box flex-box">
          <div><p>送检单位</p>
            <div class="select-btn">
              <p @click="showPicker1">{{formbData.songjianDW.value}}<span v-if="formbData.songjianDW.value ==='请选择'"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
            </div>
          </div>
        </li>
        <li class="input-box flex-box">
          <div><p>送检日期</p>
            <div class="select-btn">
              <p @click="showPicker4">{{formbData.songjianRQ.value}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="fixed-form-foot">
      <div class="form-foot">
        <div class="form-foot-main">
          <router-link to="/shaoma"><button class="pre-page">上一步</button></router-link>
          <button class="next-page" @click="formbSubmit">下一步</button>
        </div>
      </div>
    </div>
    <awesome-picker
      ref="picker0"
      :textTitle="picker0.textTitle"
      :data="picker0.data"
      :anchor="picker0.anchor"
      @confirm="handlePicker0Confirm">
    </awesome-picker>
    <awesome-picker
      ref="picker1"
      :textTitle="picker1.textTitle"
      :data="picker1.data"
      :anchor="picker1.anchor"
      @confirm="handlePicker1Confirm">
    </awesome-picker>
    <awesome-picker
      ref="picker3"
      :textTitle="picker3.textTitle"
      :type="picker3.type"
      :anchor="picker3.anchor"
      @confirm="handlePicker3Confirm($event,pickerNum)">
    </awesome-picker>
  </div>
</template>
<script>
import Vue from "vue";
import stepBar from "@/components/StepBar.vue";
import AwesomePicker from "vue-awesome-picker";
Vue.use(AwesomePicker);

const data0 = ["口腔拭子", "干血片", "外周血", "唾液"];
const data1 = [];
const STORAGE_KEY = "formbMsg";
export default {
  data() {
    return {
      dataLists: "",
      sampleTypeList: [
        {
          key: "S067",
          value: "口腔拭子"
        },
        {
          key: "S050",
          value: "干血片"
        },
        {
          key: "S060",
          value: "外周血"
        },
        {
          key: "S079",
          value: "唾液"
        }
      ],
      pickerNum: 3,
      showConditionA: false,
      showConditionB: false,
      showConditionC: false,
      formbData: {
        yangbenLX: {
          key: "样本类型",
          value: "请选择"
        },
        caiyangRQ: {
          key: "采样日期",
          value: "请选择"
        },
        songjianDW: {
          key: "送检单位",
          value: "请选择"
        },
        songjianRQ: {
          key: "送检日期",
          value: "选填"
        },
        customerCode: "",
        sampleType: ""
      },
      value: null,
      picker0: {
        anchor: [],
        textTitle: "",
        data: [data0]
      },
      picker1: {
        anchor: [],
        textTitle: "",
        data: [data1]
      },
      picker3: {
        anchor: [],
        textTitle: "",
        type: "date"
      },
      // selectedJcLists: [],
      storageLists: this.$localStorage.fetch(STORAGE_KEY)
    };
  },
  components: {
    stepBar
  },
  computed: {},
  watch: {
    storageLists: {
      handler: function(storageLists) {
        this.$localStorage.save(STORAGE_KEY, storageLists);
      },
      deep: true
    }
  },
  methods: {
    showPicker0() {
      this.$refs.picker0.show();
    },
    handlePicker0Confirm(v) {
      let index = v[0].index;
      this.formbData.sampleType = this.sampleTypeList[index].key;
      this.formbData.yangbenLX.value = v[0].value;
    },
    showPicker1() {
      this.$refs.picker1.show();
    },
    handlePicker1Confirm(v) {
      let index = v[0].index;
      this.formbData.customerCode = this.dataLists[index].customerCode;
      this.formbData.songjianDW.value = v[0].value;
    },
    showPicker3() {
      this.$refs.picker3.show();
      this.pickerNum = 3;
    },
    showPicker4() {
      this.$refs.picker3.show();
      this.pickerNum = 4;
    },
    handlePicker3Confirm(v, a) {
      // console.log(v,a);
      if (a === 3) {
        this.formbData.caiyangRQ.value =
          v[0].value + "" + v[1].value + "" + v[2].value;
      } else if (a === 4) {
        this.formbData.songjianRQ.value =
          v[0].value + "" + v[1].value + "" + v[2].value;
      }
    },
    // arrFilter(arr) {
    //   this.selectedJcLists = [];
    //   for (let i in arr) {
    //     if (arr[i] != "选填") {
    //       this.selectedJcLists.push(arr[i]);
    //     }
    //   }
    // },
    formbSubmit() {
      if (this.formbData.yangbenLX.value === "请选择") {
        this.$layer.open({
          content: "请选择样本类型",
          skin: "msg",
          time: 2
        });
        return false;
      } else if (this.formbData.caiyangRQ.value === "请选择") {
        this.$layer.open({
          content: "请选择采样日期",
          skin: "msg",
          time: 2
        });
        return false;
      } else if (this.formbData.songjianDW.value === "请选择") {
        this.$layer.open({
          content: "请选择送检单位",
          skin: "msg",
          time: 2
        });
        return false;
      } else {
        // this.arrFilter(this.formbData);
        window.localStorage.removeItem("formbMsg");
        setTimeout(() => {
          this.storageLists = this.formbData;
        }, 0);
        // console.log(this.selectedJcLists);
        // console.log(this.formbData.songjianRQ);
        // console.log(window.localStorage);
        setTimeout(() => {
          console.log(this.$localStorage.fetch(STORAGE_KEY));
          this.$router.push("/sjformc");
        }, 10);
      }
    }
  },
  mounted() {
    this.$axios
      .get(
        this.$API.api +
          "/report/?i=3&c=entry&m=nifty&do=mobile&d=WGSAppointment&f=getCustomerInfo"
      )
      .then(res => {
        this.dataLists = res.data;
        // console.log(this.dataLists);
        data1.length = 0;
        for (let i in res.data) {
          data1.push(res.data[i].customerName);
        }
      })
      .catch(err => {
        console.log(err);
      });
    // window.localStorage.removeItem("formbMsg");
    this.formbData = window.localStorage.formbMsg
      ? JSON.parse(window.localStorage.formbMsg)
      : this.formbData;
  }
};
</script>
<style lang="scss" scoped>
.sj-form {
  width: 100%;
  min-height: 100vh;
  padding-bottom: r(70);
  box-sizing: border-box;
  .fixed-form-foot {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
  }
}
</style>
